<template>
  <div class="app-container d-flex items-center justify-center" style="min-height:100vh;">
    <div class="card d-flex items-center" style="max-width:800px;width:90%;">
      <div class="flex-1 mr-4">
        <div class="text-xxl font-bold mb-3">401</div>
        <div class="mb-6">
          <h2>访问被拒绝</h2>
          <p>抱歉，您没有权限访问此页面，请联系管理员获取相应权限</p>
        </div>
        <div class="d-flex" style="gap:16px;flex-wrap:wrap;">
          <el-button type="primary" @click="goHome">
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>
          <el-button @click="goBack">
            <el-icon><Back /></el-icon>
            返回上页
          </el-button>
          <el-button type="warning" @click="reAuth">
            <el-icon><SwitchButton /></el-icon>
            重新登录
          </el-button>
        </div>
      </div>
      <div class="opacity-50">
        <el-icon :size="200" color="#ddd">
          <Lock />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { HomeFilled, Back, SwitchButton, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const goHome = () => {
  router.push('/')
}

const goBack = () => {
  router.back()
}

const reAuth = async () => {
  try {
    await ElMessageBox.confirm('确定要重新登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 尝试静默刷新
    try {
      await userStore.refreshUserToken()
      router.push('/')
      return
    } catch {}
    // 刷新失败则退出到登录
    await userStore.logout()
    router.push('/login')
  } catch {
    // 用户取消
  }
}
</script>

<style lang="scss" scoped></style>
